<template>
  <div class="comment">
    <div class="my-reply" v-clickoutside="hideReplyBtn" @click="inputFocus">
      <a-avatar class="header-img" :src="myHeader" />
      <div class="reply-info">
        <div
          tabindex="0" 
          contenteditable="true"
          id="replyInput"
          spellcheck="false"
          placeholder="输入评论..."
          class="reply-input"
          @focus="showReplyBtn"
          @input="onDivInput($event)">
        </div>
      </div>
      <div class="reply-btn-box" v-show="btnShow">
          <a-button class="reply-btn" type="primary" @click="sendComment">发表评论</a-button>
        </div>
    </div>
    <div v-for="(item, index) in comments" :key="index" class="author-title reply-father">
      <a-avatar class="header-img" :src="item.headImg" />
      <div class="author-info">
        <span class="author-name">{{item.name}}</span>
        <span class="author-time">{{item.time}}</span>
      </div>
      <div class="icon-btn">
        <span @click="showReplyInput(index,item.name,item.id)"><a-icon type="message" theme="filled" />{{item.commentNum}}</span>
        <span><a-icon type="caret-up" theme="filled" />{{item.like}}</span>
      </div>
      <div class="talk-box">
        <p>
          <span class="reply">{{item.comment}}</span>
        </p>
      </div>
      <div class="reply-box">
        <div v-for="(reply, indey) in item.reply" :key="indey" class="author-title">
          <a-avatar class="header-img" :src="reply.fromHeadImg" />
          <div class="author-info">
            <span class="author-name">{{reply.from}}</span>
            <span class="author-time">{{reply.time}}</span>
          </div>
          <div class="icon-btn">
            <span @click="showReplyInput(index,reply.name,reply.id)"><a-icon type="message" theme="filled" />{{reply.commentNum}}</span>
            <span><a-icon type="caret-up" theme="filled" />{{reply.like}}</span>
          </div>
          <div class="talk-box">
              <p>
                  <span>回复 {{reply.to}}:</span>
                  <span class="reply">{{reply.comment}}</span>
              </p>
          </div>
        </div>
      </div>
      <div v-show="_inputShow(index)" class="my-reply my-comment-reply">
        <a-avatar class="header-img" :src="myHeader" />
        <div class="reply-info">
          <div 
            tabindex="0" 
            contenteditable="true" 
            spellcheck="false" 
            placeholder="输入评论..."   
            @input="onDivInput($event)"  
            class="reply-input reply-comment-input">
          </div>
        </div>
        <div class="reply-btn-box">
          <a-button class="reply-btn" @click="sendCommentReply(index)" type="primary">发表评论</a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 自定义指令，实现点击除输入框外隐藏按钮
const clickoutside = {
  //绑定元素
  bind(el, binding, vnode) {
    function documentHandler(e){
      // 判断点击的是否为本身，是则返回
      if(el.contains(e.target)){
        return false
      }
      // 判断指令中是否绑定了函数
      if(binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }  
    // 给当前元素绑定个私有变量，方便在unbind中接触事件监听
    el.vueClickOutSide = documentHandler;
    document.addEventListener('click', documentHandler)
  },
  update(){},
  unbind(el, binding) {
    document.removeEventListener('click', el.vueClickOutSide);
    delete el.vueClickOutSide;
  },
}
export default {
  name: "Comment",
  directives: {clickoutside},
  data(){
    return{
        btnShow: false,
        index:'0',
        replyComment:'',
        myName:'Lana Del Rey',
        myHeader:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
        myId:19870621,
        to:'',
        toId:-1,
        comments:[
            {
                name:'Lana Del Rey',
                id:19870621,
                headImg:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
                comment:'我发布一张新专辑Norman Fucking Rockwell,大家快来听啊',
                time:'2019年9月16日 18:43',
                commentNum:2,
                like:15,
                inputShow:false,
                reply:[
                    {
                        from:'Taylor Swift',
                        fromId:19891221,
                        fromHeadImg:'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg',
                        to:'Lana Del Rey',
                        toId:19870621,
                        comment:'我很喜欢你的新专辑！！',
                        time:'2019年9月16日 18:43',
                        commentNum:1,
                        like:15,
                        inputShow:false
                    },
                    {
                        from:'Ariana Grande',
                        fromId:1123,
                        fromHeadImg:'https://ae01.alicdn.com/kf/Hf6c0b4a7428b4edf866a9fbab75568e6U.jpg',
                        to:'Lana Del Rey',
                        toId:19870621,
                        comment:'别忘记宣传我们的合作单曲啊',
                        time:'2019年9月16日 18:43',
                        commentNum:0,
                        like:5,
                        inputShow:false

                    }
                ]
            },
            {
                name:'Taylor Swift',
                id:19891221,
                headImg:'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg',
                comment:'我发行了我的新专辑Lover',
                time:'2019年9月16日 18:43',
                commentNum:1,
                like:5,
                inputShow:false,
                reply:[
                    {
                        from:'Lana Del Rey',
                        fromId:19870621,
                        fromHeadImg:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
                        to:'Taylor Swift',
                        toId:19891221,
                        comment:'新专辑和speak now 一样棒！',
                        time:'2019年9月16日 18:43',
                        commentNum:25,
                        like:5,
                        inputShow:false

                    }
                ]
            },
            {
                name:'Norman Fucking Rockwell',
                id:20190830,
                headImg:'https://ae01.alicdn.com/kf/Hdd856ae4c81545d2b51fa0c209f7aa28Z.jpg',
                comment:'Plz buy Norman Fucking Rockwell on everywhere',
                time:'2019年9月16日 18:43',
                commentNum:0,
                like:5,
                inputShow:false,
                reply:[]
            },
        ]
    }
  },
  methods: {
    inputFocus(){
      var replyInput = document.getElementById('replyInput');
      replyInput.style.padding= "8px 8px"
      replyInput.style.border ="2px solid blue"
      replyInput.focus()
    },  
    showReplyBtn(){
      this.btnShow = true
    },
    hideReplyBtn(){
      this.btnShow = false
      replyInput.style.padding= "10px"
      replyInput.style.border ="none"
    },
    showReplyInput(i,name,id){
      this.comments[this.index].inputShow = false
      this.index =i
      this.comments[i].inputShow = true
      this.to = name
      this.toId = id
    },
    _inputShow(i){
      return this.comments[i].inputShow 
    },
    sendComment(){
      if(!this.replyComment){
            this.$message.warning('评论不能为空')
      }else{
          let a ={}
          let input =  document.getElementById('replyInput')
          let timeNow = new Date().getTime();
          let time= this.dateStr(timeNow);
          a.name= this.myName
          a.comment =this.replyComment
          a.headImg = this.myHeader
          a.time = time
          a.commentNum = 0
          a.like = 0
          this.comments.push(a)
          this.replyComment = ''
          input.innerHTML = '';

      }
    },
    sendCommentReply(i){
      if(!this.replyComment){
        this.$message.warning('评论不能为空')
      }else{
          let a ={}
          let timeNow = new Date().getTime();
          let time= this.dateStr(timeNow);
          a.from= this.myName
          a.to = this.to
          a.fromHeadImg = this.myHeader
          a.comment =this.replyComment
          a.time = time
          a.commentNum = 0
          a.like = 0
          this.comments[i].reply.push(a)
          this.replyComment = ''
          document.getElementsByClassName("reply-comment-input")[i].innerHTML = ""
      }
    },
    onDivInput: function(e) {
      this.replyComment = e.target.innerHTML;
    },
    dateStr(date){
      //获取js 时间戳
      var time=new Date().getTime();
      //去掉 js 时间戳后三位，与php 时间戳保持一致
      time=parseInt((time-date)/1000);
      //存储转换值 
      var s;
      if(time<60*10){//十分钟内
          return '刚刚';
      }else if((time<60*60)&&(time>=60*10)){
          //超过十分钟少于1小时
          s = Math.floor(time/60);
          return  s+"分钟前";
      }else if((time<60*60*24)&&(time>=60*60)){ 
          //超过1小时少于24小时
          s = Math.floor(time/60/60);
          return  s+"小时前";
      }else if((time<60*60*24*30)&&(time>=60*60*24)){ 
          //超过1天少于30天内
          s = Math.floor(time/60/60/24);
          return s+"天前";
      }else{ 
          //超过30天ddd
          var date= new Date(parseInt(date));
          return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
      }
    }
  }, 
}
</script>
<style lang="less" scoped>
  .my-reply {
    padding: 10px;
    background: #fafbfc;

    .header-img {
      display: inline-block;
      vertical-align: top;
    }

    .reply-info {
      display: inline-block;
      margin-left: 5px;
      width: 80%;

      .reply-input {
        min-height: 20px;
        line-height: 22px;
        padding: 10px;
        color: #ccc;
        background: #fff;
        border-radius: 5px;
        &:empty:before{
          content: attr(placeholder);
        }
        &:focus:before{
          content: none;
        }
        &:focus{
          padding: 8px;
          border: 2px solid blue;
          box-shadow: none;
          outline: none;
        }
      }
    }
    .reply-btn-box {
      height: 25px;
      margin: 10px 0;
      .reply-btn {
        position: relative;
        float: right;
        margin-right: 15px;
      }
    }
  }
  .my-comment-reply {
    margin-left: 50px;
    .reply-input{
      width: flex;
    }
  }
  .author-title:not(:last-child){
    border-bottom: 1px solid rgba(178,186,194,.3)
  }
  .author-title{
    padding: 10px;
    .header-img {
      display: inline-block;
      vertical-align: top;
    }
    .author-info {
      display: inline-block;
      margin-left: 5px;
      width: 60%;
      height: 40px;
      line-height: 20px;
      >span{
        display: block;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .author-name {
        color: #000;
        font-size: 18px;
        font-weight: bold;
      }
      .author-time {
        font-size: 14px;
      }
    }

    .icon-btn {
      width: 15%;
      padding: 0 !important;
      float: right;
      >span{
        cursor: pointer;
      }
    }
    .talk-box{
      margin: 0 50px;
      >p{
        margin: 0;
      }
      .reply {
        font-size: 16px;
        color: #000;
      }
    }
    .reply-box{
      margin: 10px 0 0 50px;
      background-color: #efefef;
    }
  }
</style>